<template>
  <NuxtLayout>
    <Head>
      <Title>首页 - 国内领先的企业智能信息化IT解决方案提供商</Title>
      <Meta name="description" content="管理页面" />
    </Head>
    <template #banner>
      <HomeSwiper :data="banners" />
    </template>
    <HomeProject :meta="state.project" :data="state.project.rows" />
    <HomeProject :meta="state.ui" :data="state.project.rows" />
  </NuxtLayout>
</template>
<script setup lang="ts">
import { useIndexArticle } from '~/api'

const state = reactive({
  project: {
    title: '案例',
    subTitle: '10年开发经验+100家合作企业+硬核技术团队',
    rows: [],
    total: 0,
  },
  ui: {
    title: '设计作品',
    subTitle: '14年建站经验+800家企业客户+知名建站团队',
    rows: [],
    total: 0,
  },
})
const banners = [
  {
    img: 'https://shaders-slider.uiinitiative.com/images/01.jpg',
    title: '111',
    url: 'http://www.baidu.com',
  },
  {
    img: 'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000367/100024848970/FocusFullshop/CkFqZnMvdDEvOTE4NjYvNi8zODIzMy84ODg5Mi82NDVhOWM4ZkY1NTljOGE5Yy85OTAzNzIyNjZmMTg1Y2Y2LnBuZxIJNC10eV8wXzU1MAI474t6QhwKGOWogemcsuWjq-aZrumAmua0l-iho-a2shABQhYKEuW8gOWQr-eyvuiHtOeUn-a0uxACQhAKDOeri-WNs-aKoui0rRAGQgcKA-aKohAHWMqkyM_0Ag/cr/s/q.jpg',
    title: '222',
    url: '',
  },
  {
    img: 'https://imgcps.jd.com/ling-cubic/ling4/lab/amZzL3QxLzEyNTIyMC8yNC8zNjE4OS8xMTAxNTQvNjQzYzI2Y2VGNGNlYzZlNTUvNGM5Y2I5MmQ5MWVlMDExZS5wbmc/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/1635186804533968897/cr/s/q.jpg',
    title: '333',
    url: '',
  },
]

// 获取文章
const getIndexArticle = async () => {
  const { data: res }: any = await useAsyncData(`use_IndexArticle`, () => useIndexArticle({ type: 'latest' }))
  const data = res.value.data

  state.project.rows = data.rows
  state.project.total = data.total
}

getIndexArticle()
</script>
<style></style>
